<template>
  <!-- prettier-ignore -->
  <q-drawer v-model="appStore.sidebar" show-if-above bordered :breakpoint="600" :width="260" :mini="mini" @mouseover="mo = true" @mouseout="mo = false">
    <!-- 菜单栏LOGO -->
    <q-list v-if="settingStore.sidebarLogo" class="bg-grey-10 text-white text-h6">
      <q-item>
        <q-item-section avatar> <q-img :src="logo" width="25px" /> </q-item-section>
        <q-item-section class="ellipsis">{{ appTitle }}</q-item-section>
      </q-item>
    </q-list>

    <!-- 菜单 -->
    <q-scroll-area :style="'height: calc(100vh - ' + (settingStore.sidebarLogo ? 49 : 0) + 'px)'" class="menu-list">
      <q-list>
        <sidebar-item v-for="menu in userStore.menus" :key="menu.path" :item="menu" :level="0" />
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useQuasar } from 'quasar';

  import logo from 'src/assets/logo.png';
  import SidebarItem from './SidebarItem.vue';
  import { useAppStore, useSettingStore, useUserStore } from 'src/stores';

  const appStore = useAppStore();
  const settingStore = useSettingStore();
  const userStore = useUserStore();

  const appTitle = process.env.APP_TITLE;

  // 平板或小中屏时设置mini状态，鼠标滑过取消mini状态
  const $q = useQuasar();
  const mo = ref(false);
  const mini = computed(() => $q.screen.lt.md && !mo.value);
</script>

<style lang="scss" scoped>
  .menu-list {
    background-color: #304156;
    color: #bfcbd9;
  }

  .body--dark {
    .menu-list {
      background-color: $dark;
    }
  }
</style>
